import {FC, PureComponent, useEffect, useState} from "react"
import Loading from "./loading";
import './film.scss'
interface Props {
    type:number
}

const Index:FC<Props> = ({type}) => {
    const [tableData,setTableData] = useState({
        pageNum:1,
        pageSize:10,
        list:[],
        total:0,

        finished:false
    })

    // UNSAFE_componentWillReceiveProps(nextProps: Readonly<Props>) {
    //     if(nextProps.type !== this.props.type){
    //         this.setState({
    //             pageNum:1,
    //             pageSize:10,
    //             list:[],
    //             total:0,
    //         },()=>{
    //             this.onTableData(nextProps.type)
    //         })
    //     }
    // }

    const onTableData = async(type:number)=>{
        const { pageNum, pageSize } = tableData
        const {
            data:{total,list}
        } = await fetch(`fsdy/film/index?pagenum=${pageNum}&pagesize=${pageSize}&type=${type}`)
            .then((res)=> res.json())


        tableData.total = total
        tableData.list = tableData.total >= tableData.list.length ? [...tableData.list,...list] : list

    }

    useEffect(()=> {
        onTableData(type)

        document.addEventListener('scroll',()=>{
            const scrollTop = document.documentElement.scrollTop
            const clientHeight = document.documentElement.clientHeight
            const scrollHeight = document.documentElement.scrollHeight

            if(clientHeight + scrollTop + 1 >= scrollHeight){
                if(tableData.list.length >=tableData.total){
                    tableData.finished = true

                    return
                }
                tableData.pageNum = tableData.pageNum + 1

                onTableData(type)
            }
        })
    })

    const getFilmHtml = ()=>{
        return tableData.list.map((item:any,index)=>{
            return (
                <div className='films' key={index}>
                    <div className='film'>
                        <img src={item.poster} alt=""/>
                    </div>
                    <div className='info'>
                        <div className='title'>
                            {item.name}<span>{item.filmType}</span>
                        </div>
                        <div className='comment'>
                            观众评分<span>{item.grade}</span>
                        </div>
                        <div className='author'> 主演：
                            {JSON.parse(item.actors).map((item:any)=>item.name).join(' ')}
                        </div>
                        <div className='time'>{item.nation} | {item.runtime}分钟</div>
                        <div className='address'>{item.address}</div>
                    </div>
                    <div className='btn'>
                        <button>购买</button>
                    </div>
                </div>
            )
        })
    }

    return (
    <div style={ {marginTop:'-45px',paddingBottom:'100px'} }>
        {getFilmHtml()}
        {tableData.finished ? <p className='foot'>没有更多了</p>:<Loading></Loading>}
    </div>
    )

}
export default Index
